<template>
	<view>
		<back :showBackText="false" customClass="bg-gradual-blue text-white" title="课程详情"></back>
		<view v-if="isLoad" class="flex flex-direction">

			<!-- 视频封面区域 -->
			<view class="video-cover" v-if="!showVideoPlayer" @tap="playFirstVideo">
				<image :src="info.cover" mode="aspectFill" lazy-load></image>
				<view class="video-duration">
					<text>共{{ videoList.length }}课时</text>
				</view>
				<view class="video-tag" v-if="info.is_hot">
					<text>HOT</text>
				</view>
				<view class="play-icon">
					<text class="cuIcon-playfill"></text>
				</view>
			</view>

			<!-- 视频播放区域 -->
			<view class="video-container" v-if="showVideoPlayer">
				<video :src="currentVideoUrl" controls autoplay class="video-player"></video>
			</view>

			<!-- 课程信息区域 -->
			<view class="course-info bg-white padding">
				<view class="course-title text-bold">{{ info.name }}</view>
				<view class="course-desc text-gray">{{ info.description }}</view>
				<view class="flex justify-between align-center margin-top-sm">
					<view class="">
						<text class="text-red text-xxl text-bold">¥{{ info.price }}</text>
						<text class="text-gray text-del margin-left-xs">¥{{ info.market_price }}</text>
					</view>
					<view class="text-blue"><text class="cuIcon-peoplefill margin-right-xs"></text>{{ info.sale_num }}人购买
					</view>
				</view>
			</view>

			<!-- 分隔线 -->
			<view class="divider-line"></view>

			<!-- Tab切换区域 -->
			<view class="cu-bar bg-white">
				<view class="action" style="width: 100%;">
					<view class="tabs">
						<view :class="['tab-item', currentTab == index ? 'text-blue cur' : '']"
							v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
							{{ item }}
						</view>
					</view>
				</view>
			</view>

			<!-- Tab内容区域 -->
			<view class="tab-content">
				<!-- 详情 -->
				<view v-if="currentTab == 0" class="padding bg-white">
					<rich-text :nodes="info.content"></rich-text>
				</view>

				<!-- 目录 -->
				<view v-if="currentTab == 1" class="bg-white video-list-container">
					<scroll-view scroll-y style="max-height: 60vh;">
						<view v-for="(item, index) in videoList" :key="index" class="cu-item video-item solid-bottom"
							@tap="selectVideo" :data-id="index"
							:class="currentVideoIndex === index ? 'active-video' : ''">
							<view class="flex align-center justify-between">
								<view class="flex align-center" style="flex: 1;">
									<view class="video-index">{{ index + 1 }}</view>
									<view class="flex-sub margin-left-sm" style="max-width: 80%;">
										<view class="text-black text-df" style="display: flex; flex-direction: column;">
											<text class="text-cut"
												style="max-width: 390rpx; display: inline-block;">{{ item.name }}</text>
											<view class="margin-top-xs" style="padding-left: 0;">
												<view v-if="item.is_free == 1" class="free-tag">

													<text class="cu-tag bg-blue light radius sm"
														style="vertical-align: middle;">免费体验</text>
													<text class="cuIcon-hotfill text-orange"
														style="font-size: 32rpx; margin-right: 4rpx; vertical-align: middle;"></text>
												</view>
												<view v-if="item.is_free == 0" class="free-tag">
													<text class="cu-tag bg-blue light radius sm"
														style="vertical-align: middle;">付费解锁</text>
													<text class=" text-orange"
														:class="!info.isPay ? 'cuIcon-lock' : 'cuIcon-unlock'"
														style="font-size: 32rpx; margin-right: 4rpx; vertical-align: middle;"></text>

												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="cuIcon-playfill text-blue" style="font-size: 40rpx; margin-right: 10rpx;"
									v-if="currentVideoIndex === index"></view>
								<view class="cuIcon-play text-gray" style="font-size: 40rpx; margin-right: 10rpx;"
									v-else></view>
							</view>
						</view>
						<view v-if="videoList.length == 0" class="empty-state-container">
							<view class="empty-icon">
								<text class="cuIcon-video text-gray"></text>
							</view>
							<view class="empty-text">
								<text class="title">暂无视频内容</text>
							</view>
						</view>

					</scroll-view>
				</view>

				<!-- 课件 -->
				<view v-if="currentTab == 2" class="bg-white">
					<view v-for="(item, index) in materialList" :key="index"
						class="cu-item material-item solid-bottom padding" @tap="downloadMaterial" :data-id="index">
						<view class="flex align-center justify-between">
							<view class="flex align-center">
								<view class="cuIcon-file text-blue margin-right"></view>
								<view class="text-black">{{ item.name }}</view>
							</view>
							<view class="cuIcon-down text-blue"></view>
						</view>
						<view class="text-gray text-sm margin-top-xs">{{ item.size }} mb| {{ item.type }}</view>
					</view>
					<view v-if="materialList.length == 0" class="empty-state-container">
						<view class="empty-icon">
							<text class="cuIcon-file text-gray"></text>
						</view>
						<view class="empty-text">
							<text class="title">暂无课件内容</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="bottom-layout cu-bar bg-white tabbar border shop">
			<button class="action text-blue" open-type="share">
				<view class="cuIcon-forwardfill"></view>
				<text class="text-sm text-blue">分享</text>
			</button>
			<button class="action text-blue" open-type="contact">
				<view class="cuIcon-servicefill"></view>
				<text class="text-sm text-blue">客服</text>
			</button>
			<!-- 根据购买状态显示不同按钮 -->
			<view v-if="!info.isPay" class="bg-red flex-twice radius" @tap="buyCourse">
				<view class="padding-sm text-center">
					<text class="text-white">立即购买</text>
				</view>
			</view>
			<view v-else class="bg-blue flex-twice radius" @tap="startLearning">
				<view class="padding-sm text-center">
					<text class="text-white">立即学习</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	get,
	post
} from "@/common/js/http.js";
let app = getApp(),
	that = null,
	cache = app.globalData.config.storage;
export default {
	data() {
		return {
			isLoad: false,
			info: {},
			tabs: ['网课详情', '视频目录', '课件下载'],
			currentTab: 0,
			currentVideoUrl: '',
			currentVideoIndex: 0,
			videoList: [],
			currentVideo: {},
			materialList: [],
			showVideoPlayer: false,
		};
	},
	onLoad(options) {
		app.globalData.showShareMenu();
		that = this;
		this.getCourseDetail(options.id);
	},
	methods: {
		getCourseDetail(id) {
			get('videoCollection/getInfo', {
				id: id
			})
				.then((res) => {
					that.info = res.data.info;
					that.videoList = res.data.videoList;
					that.materialList = res.data.coursewareList;
					that.isLoad = true;
				});
		},
		tabSelect(e) {
			this.currentTab = e.currentTarget.dataset.id;
		},
		selectVideo(e) {
			const index = e.currentTarget.dataset.id;
			that.playVideo(index);
		},
		playVideo(index) {
			get('video/getInfo', {
				id: that.videoList[index].id
			})
				.then(function (res) {
					console.log(res);
					that.currentVideoIndex = index;
					that.currentVideoUrl = res.data.url;
					that.showVideoPlayer = true;
				}).catch((res) => {
					console.log(res);
				});
		},
		playFirstVideo() {
			if (this.videoList.length > 0) {
				that.playVideo(0);
			}
		},
		downloadMaterial(e) {
			const index = e.currentTarget.dataset.id;
			const material = this.materialList[index];
		},
		async buyCourse() {
			// 购买课程的逻辑
			try {
				let res = await post('order/create', {
					type: 4,
					collection_id: that.info.id
				});
				let id = res.data.order_id;
				let url = '/pages/pay/pay?id=' + id;
				uni.navigateTo({
					url: url
				});
			} catch (e) {
				console.error(e);
				uni.showToast({
					title: '创建订单失败',
					icon: 'none'
				});
			}
		},
		startLearning() {
			// 已购买课程，开始学习
			if (this.videoList.length > 0) {
				this.currentVideoIndex = 0;
				this.showVideoPlayer = true;
				// 获取第一个视频的播放地址
				get('video/getInfo', {
					id: this.videoList[0].id
				})
					.then(function (res) {
						that.currentVideoUrl = res.data.url;
					});
			} else {
				uni.showToast({
					title: '暂无视频内容',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style>
@import './detail.css';

/* 空状态样式 */
.empty-state-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 30rpx;
}

.empty-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background-color: #f8f9fa;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
}

.empty-icon text {
	font-size: 60rpx;
	color: #8799a3;
}

.empty-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.empty-text .title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.empty-text .subtitle {
	font-size: 26rpx;
	color: #8799a3;
	text-align: center;
}

/* 视频封面样式 */
.video-cover {
	position: relative;
	width: 100%;
	height: 422rpx;
	background-color: #000;
	overflow: hidden;
}

.video-cover image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-duration {
	position: absolute;
	bottom: 16rpx;
	right: 16rpx;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
}

.video-tag {
	position: absolute;
	top: 16rpx;
	left: 16rpx;
	background-color: #FF6A00;
	color: #fff;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
}

.play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

.play-icon .cuIcon-playfill {
	font-size: 50rpx;
	color: #fff;
	margin-left: 8rpx;
	/* 稍微偏右一点，视觉上更居中 */
}

/* 免费标签样式 */
.free-tag {
	display: inline-flex;
	align-items: center;
	margin-left: 0;
	vertical-align: middle;
	height: 36rpx;
	line-height: 36rpx;
}
</style>